<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>下拉刷新+原生的title+原生的tab</title>
    <link rel="stylesheet" href="css/mui.min.css">
	<style>
		/*重置下拉刷新的位置*/
		.mui-pull-bottom-pocket, .mui-pull-top-pocket{ 
			height: 100px!important;
		}
    </style>
</head>
<body>
	<script src="js/mui.min.js"></script>
	<script src="js/util.js"></script>
    <script>
    	mui.init({
    		subpages:[{ //开启双webview 实现拉开式下拉刷新加载
    			id: 'pullPage.html',
    			url: 'pullPage.html',
    			styles: {
    				top: '45px',
    				bottom: '0',
    				background: 'blue'
    			}
    		}]
    	})
    	document.addEventListener('plusready', function() {//plus 准备完毕之后执行绘制操作
    		var self = plus.webview.currentWebview(),
    			leftPos = Math.ceil((window.innerWidth - 60) / 2); //60是居中的tab的宽度 为了突出效果
    			
    		/**
    		 * 不推荐这种写法, manifest.json中配置可以使app启动速度更快
    		 * 首页的头部和脚部可以在 manifest.json中设置 ( titleNView和subNViews )
    		var headerView = new plus.nativeObj.View('header', {top:'0px',left:'0px',width:'100%',height:'45px'});
		    		headerView.drawRect('#ff0000', {top:'0px',left:'0px',width:'100%',height:'45px'}, 'header');
		    		headerView.drawText('首页', {top:'0px',height:'45px'},{color:'#0000ff'}, 'headerTitle');
    		var footerView = new plus.nativeObj.View('footer', {bottom:'0px',left:'0px',width:'100%',height:'50px'});
	    		footerView.draw([
	    			{id:'background',tag:'rect',position:{}, color:'yellow'},
	    			{id:'font1',tag:'font',text:'首页',textStyles:{size:'18px',color:'red'},position:{top:'0px',left:'0px',width:'20%',height:'50px'}},
	    			{id:'font2',tag:'font',text:'微淘',textStyles:{size:'18px',color:'red'},position:{top:'0px',left:'20%',width:'20%',height:'50px'}},
	    			{id:'font3',tag:'font',text:'消息',textStyles:{size:'18px',color:'red'},position:{top:'0px',left:'40%',width:'20%',height:'50px'}},
	    			{id:'font4',tag:'font',text:'购物车',textStyles:{size:'18px',color:'red'},position:{top:'0px',left:'60%',width:'20%',height:'50px'}},
	    			{id:'font5',tag:'font',text:'我的淘宝',textStyles:{size:'18px',color:'red'},position:{top:'0px',left:'80%',width:'20%',height:'50px'}},
	    		])
	    		footerView.show();       //直接显示
	    		self.append(headerView); //添加到当前的webview,并且显示
    		plus.webview.currentWebview().append(headerView);//只在当前的webview绘制, 即是 局部绘制, 不是全局全站的绘制
    		*/
    		
    		/**
    		 * drawNativeIcon 绘制带边框的半圆
    		 * 实现原理:
    		 * id为bg的tag 创建带边框的圆
    		 * id为bg2的tag 创建白色的矩形遮住圆下半部分, 只显示圆的凸起带边框部分
    		 * id为iconBg的tag 创建红色背景图
    		 * id为icon的字体图标
    		 * 注意创建的先后顺序, 创建的越晚的层级越高
    		 */
    		var drawNativeIcon = util.drawNative('icon', {
    			bottom: '0px',
    			left: leftPos + 'px',
    			width: '60px',
    			height: '61px'
    		}, [
    			{
	    			tag: 'rect',
	    			id: 'bg',
	    			position: {top:'1px',left:'0px',width:'100%',height:'100%'}, 
	    			rectStyles: {color:'#fff',radius:'50%',borderColor:'#ccc',borderWidth:'1px'}
	    		},{
	    			tag: 'rect',
	    			id: 'bg2',
	    			position: {bottom:'0px',left:'0px',width:'100%',height:'50px'}, 
	    			rectStyles: {color:'#fff'}
	    		},{
	    			tag: 'rect',
	    			id: 'bg3',
	    			position: {bottom:'5px',left:'5px',width:'50px',height:'50px'}, 
	    			rectStyles: {color:'#ff9800',radius:'50%',borderColor:'#ccc',borderWidth:'2px'}
	    		},{
	    			tag: 'font',
	    			id: 'icon',
	    			text: '+',
	    			position: {top:'3px',bottom:'5px',left:'5px',width:'50px',height:'50px'}, 
	    			textStyles: {fontSrc: '_www/fonts/iconfont.ttf',align:'center',color:'#fff',size:'45px'}
	    		}
    		]);
    		self.append(drawNativeIcon);//添加到当前的webview,并且显示
    		
    		
    		
    	})
    	
    	
    </script>
</body>
</html>


<!--"launchwebview": {
	"bottom": "0px",
	"background": "#fff",
	"titleNView": {
        "backgroundcolor": "#f7f7f7",
        "titletext": "首页",
        "titlecolor": "#ff461f"
	},
	"subNViews": [
		{
			"id": "tabBar",
			"styles": {
				"bottom": "0px",
				"left": "0px",
				"height": "50px",
				"width": "100%",
				"backgroundColor": "#fff"
			},
			"tags": [
				{
					"tag": "font",
					"id": "indexIcon", 
					"text": "\ue500",
					"position": {"top":"4px","left":"0px","width":"25%","height":"24px"},
					"textStyles": {"fontSrc":"_www/fonts/mui.ttf","align":"center","size":"24px"}
				},{
					"tag": "font",
					"id": "indexText", 
					"text": "首页",
					"position": {"top":"23px","left":"0px","width":"25%","height":"24px"},
					"textStyles": {"fontSrc":"_www/fonts/mui.ttf","align":"center","size":"10px"}
				},{
					"tag": "font",
					"id": "newsIcon", 
					"text": "\ue201",
					"position": {"top":"4px","left":"20%","width":"25%","height":"24px"},
					"textStyles": {"fontSrc":"_www/fonts/mui.ttf","align":"center","size":"24px"}
				},{
					"tag": "font",
					"id": "newsText", 
					"text": "消息",
					"position": {"top":"23px","left":"20%","width":"25%","height":"24px"},
					"textStyles": {"fontSrc":"_www/fonts/mui.ttf","align":"center","size":"10px"}
				},{
					"tag": "font",
					"id": "contactIcon", 
					"text": "\ue100",
					"position": {"top":"4px","left":"55%","width":"25%","height":"24px"},
					"textStyles": {"fontSrc":"_www/fonts/mui.ttf","align":"center","size":"24px"}
				},{
					"tag": "font",
					"id": "contactText", 
					"text": "通讯录",
					"position": {"top":"23px","left":"55%","width":"25%","height":"24px"},
					"textStyles": {"fontSrc":"_www/fonts/mui.ttf","align":"center","size":"10px"}
				},{
					"tag": "font",
					"id": "newwindowIcon", 
					"text": "\ue6c9",
					"position": {"top":"4px","left":"75%","width":"25%","height":"24px"},
					"textStyles": {"fontSrc":"_www/fonts/mui.ttf","align":"center","size":"24px"}
				},{
					"tag": "font",
					"id": "newwindowText", 
					"text": "新窗口",
					"position": {"top":"24px","left":"75%","width":"25%","height":"24px"},
					"textStyles": {"fontSrc":"_www/fonts/mui.ttf","align":"center","size":"10px"}
				}
			]
		}
	]-->
		